<template>
  <div class="floating-tools">
    <!-- 主题切换按钮 -->
    <el-tooltip 
      :content="getThemeText()" 
      placement="left"
      effect="dark"
    >
      <button 
        class="tool-button theme-button" 
        @click="toggleTheme"
        :title="getThemeText()"
      >
        <el-icon class="tool-icon">
          <Sunny v-if="getThemeIcon() === 'Sunny'" />
          <Moon v-else />
        </el-icon>
      </button>
    </el-tooltip>

    <!-- 回到顶部按钮 -->
    <el-tooltip 
      content="回到顶部" 
      placement="left"
      effect="dark"
    >
      <button 
        class="tool-button back-to-top-button" 
        @click="scrollToTop"
        v-show="showBackToTop"
        title="回到顶部"
      >
        <el-icon class="tool-icon">
          <Top />
        </el-icon>
      </button>
    </el-tooltip>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { Sunny, Moon, Top } from '@element-plus/icons-vue'
import { useTheme } from '@/composables/useTheme'

const { toggleTheme, getThemeIcon, getThemeText } = useTheme()

// 回到顶部功能
const showBackToTop = ref(false)

const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}

const handleScroll = () => {
  showBackToTop.value = window.pageYOffset > 300
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll, { passive: true })
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.scss';
@import '@/assets/styles/mixins.scss';

.floating-tools {
  position: fixed;
  right: 30px;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  z-index: 1000;
}

.tool-button {
  @include center-flex;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: var(--transition-normal);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-lg);
  
  &:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: var(--shadow-xl);
  }
  
  &:active {
    transform: translateY(0) scale(0.95);
  }
}

.theme-button {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  
  &:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: rgba(102, 126, 234, 0.1);
  }
}

.back-to-top-button {
  background: var(--primary-color);
  color: white;
  
  &:hover {
    background: var(--primary-dark);
  }
}

.tool-icon {
  font-size: var(--font-size-xl);
  transition: var(--transition-fast);
}

// 暗黑模式下的特殊样式
[data-theme="dark"] .theme-button {
  &:hover {
    background: rgba(102, 126, 234, 0.2);
  }
}

// 响应式设计
@include respond-below(md) {
  .floating-tools {
    right: 20px;
    bottom: 20px;
  }
  
  .tool-button {
    width: 45px;
    height: 45px;
  }
  
  .tool-icon {
    font-size: var(--font-size-lg);
  }
}

// 动画效果
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tool-button {
  animation: fadeInUp 0.3s ease-out;
}
</style>